<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
        }

        .item {
            font-family: Arial, sans-serif;
            margin: 15px 0;
            display: block;
            font-size: 16px;
        }
    </style>

    <script src="./static/element-plus/vue.global.js"></script>
</head>

<body>

    <div class="container">
        <div id="counter">
            <h1>个人基本信息</h1>
            <span class="item">{{ name }}</span>
            <span class="item">{{ age }}</span>
            <span class="item">{{ hobby }}</span>
            <span class="item">{{ major }}</span>
            <div class="signature item" v-html="signature"></div>
        </div>
    </div>

    <script>

        const App = {
            data() {
                return {
                    name: '姓名：张三',
                    age: '年龄：20',
                    hobby: "爱好：玩",
                    major: "专业：软件技术",
                    signature: `
                        <h3>个性签名</h3>
            <a href="https://gitee.com/lxy12312/technical-community">点击进入我的Gitee</a>
                        <ul>
                            <li>保持自律</li>
                            <li>每日锻炼</li>
                            <li>追求生活质量</li>
                        </ul>
                        <p>座右铭：自律遇见更好的自己！</p>
                    `
                }
            }
        }
        Vue.createApp(App).mount('#counter')
    </script>
</body>

</html>